﻿@section HeaderSection {
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />

    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />

    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
}
<h2>Kendo Grid boud to ASP.NET MVC action methods</h2>
@* The DIV where the Kendo grid will be initialized *@
<div id="grid"></div>
<script>
$(function () {
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            "ProductName",
            { field: "UnitPrice", format: "{0:c}", width: "150px" },
            { field: "UnitsInStock", width: "150px" },
            { field: "Discontinued", width: "100px" },
            { command: "destroy", title: "Delete", width: "110px" }
        ],
        editable: true, // enable editing
        pageable: true,
        sortable: true,
        filterable: true,
        toolbar: ["create", "save", "cancel"], // specify toolbar commands
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
                model: { // define the model of the data source. Required for validation and property types.
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            },
            batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
            transport: {
                create: {
                    url: "@Url.Action("Create", "Home")", //specify the URL which should create new records. This is the Create method of the HomeController.
                    type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                },
                read: {
                    url: "@Url.Action("Read", "Home")", //specify the URL which should return the records. This is the Read method of the HomeController.
                    contentType: "application/json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                update: {
                    url:"@Url.Action("Update", "Home")", //specify the URL which should update the records. This is the Update method of the HomeController.
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                destroy: {
                    url: "@Url.Action("Destroy", "Home")", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        // post the products so the ASP.NET DefaultModelBinder will understand them:

                        // products[0].Name="name"
                        // products[0].ProductID =1
                        // products[1].Name="name"
                        // products[1].ProductID =1

                        var result = {};

                        for (var i = 0; i < data.models.length; i++) {
                            var product = data.models[i];

                            for (var member in product) {
                                result["products[" + i + "]." + member] = product[member];
                            }
                        }

                        return result;
                    } else {
                        return JSON.stringify(data)
                    }
                }
            }
        }
    });
});
</script>